import React, { Component } from 'react'
import { Layout, Menu } from "antd"
import {
    AppstoreOutlined,
    ContainerOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    MailOutlined
  } from '@ant-design/icons';
// 所有的import语句必须放在页面最上面，否则会报错
import { Route, Switch, NavLink, Link, Redirect } from 'react-router-dom'
import routerList from '../router/routerList';
import RouterView from '../router/routerView';
import Myheader from '../components/myheader';
const { Header, Footer, Sider, Content } = Layout;
function getItem(label, key, icon, children, type) {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
}
const items = [
    getItem(<NavLink to="/dh1">路由1</NavLink>, '1', <PieChartOutlined />),
    getItem('Navigation One', 'sub1', <MailOutlined />, [
      getItem(<NavLink to="/dh2">路由2</NavLink>, '5'),
      getItem(<NavLink to="/dh3">路由3</NavLink>, '6'),
    ])
  ]; 
class App extends Component {
    render() {
        return (
            <>
                <Layout>
                    <Header>
                        <Myheader></Myheader>
                    </Header>
                    <Layout>
                        <Sider>
                        <Menu
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            mode="inline"
                            theme="dark"
                            // inlineCollapsed={collapsed}
                            items={items}
                        />
                        </Sider>
                        <Content>
                            <RouterView RouterList={routerList}></RouterView>
                            {/* <Route></Route>
                            <Route></Route>
                            <Route></Route>
                            <Redirect></Redirect> */}
                        </Content>
                    </Layout>
                </Layout>
            </>
        )
    }
}

export default App